﻿<!--_meta 作为公共模版分离出去-->
{{template "admin/common/meta.html" .}}
<!--/meta 作为公共模版分离出去-->

<title>管理员列表 - 管理员列表 - H-ui.admin v3.0</title>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<!--_header 作为公共模版分离出去-->
{{template "admin/common/head.html" .}}
<!--/_header 作为公共模版分离出去--> 

<!--_menu 作为公共模版分离出去-->
{{template "admin/common/menu.html" .}}
<!--/_menu 作为公共模版分离出去-->

<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
		<span class="c-gray en">&gt;</span>
		管理员管理
		<span class="c-gray en">&gt;</span>
		管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a> </nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<div class="text-c"> 日期范围：
				<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemin" class="input-text Wdate" style="width:120px;">
				-
				<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax" class="input-text Wdate" style="width:120px;">
				<input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" id="" name="sosuouser">
				<button type="button" class="btn btn-success" id="" name="sosuo"><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
			</div>
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l"> <a href="javascript:;" onclick="info_datadel('批量删除用户','/api/user/delall')" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="javascript:;" onclick="info_add('添加管理员','/admin/user/add','800','500')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加管理员</a> </span>
				<!-- <span class="r">共有数据：<strong>54</strong> 条</span> -->
			</div>
			<table class="table table-border table-bordered table-bg">
				<thead>
					<tr>
						<th scope="col" colspan="9">员工列表</th>
					</tr>
					<tr class="text-c">
						<th width="25"><input type="checkbox" name="xuan" value=""></th>
						<th width="40">ID</th>
						<th width="150">用户名</th>
						<th width="150">角色</th>
						<th width="90">密码</th>
						<th width="100">是否已启用</th>
						<th width="100">操作</th>
					</tr>
				</thead>
					
					<!-- 
						<tr>
						<td></td>
						<td></td>
						<td></td>
						<td>$val.Status</td>
						<td> <a href="/admin/user/edit/$val.Id">修改</a><a href="/admin/user/del/$val.Id">删除</a></td>
						</tr>
						<tr class="text-c">
						<td><input type="checkbox" value="2" name=""></td>
						<td>2</td>
						<td>zhangsan</td>
						<td>13000000000</td>
						<td>admin@mail.com</td>
						<td>栏目编辑</td>
						<td>2014-6-11 11:11:42</td>
						<td class="td-status"><span class="label radius">已停用</span></td>
						<td class="td-manage"><a style="text-decoration:none" onClick="admin_start(this,'10001')" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe615;</i></a> <a title="编辑" href="javascript:;" onclick="admin_edit('管理员编辑','admin-add.html','2','800','500')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
					</tr> -->
				</tbody>
			</table>
		</article>
	</div>
</section>

<!--_footer 作为公共模版分离出去--> 
{{template "admin/common/foot.html" .}}
<!--/_footer /作为公共模版分离出去--> 

<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript" src="/static/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="/static/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/static/admin/lib/laypage/1.2/laypage.js"></script> 
<script type="text/javascript">

var table = $('.table-bg').dataTable({
	"searching":false, //去除搜索框
	"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,5 ] }],
	"aaSorting": [[1, "asc"]],
	serverSide: true,
	ajax: '/api/user/list',
	columns: [
		{"data": "a", "defaultContent": "我是复选框"},
		{"data": "Id"},
		{"data": "Username"},
		{"data": "e", "defaultContent": "无"},
		{"data": "Password"},
		{"data": "c", "defaultContent": "我是状态"},
		{"data": "d", "defaultContent": "我是操作"}
	],
	//回调
	createdRow: function (row, data, dataIndex){
		//调试执行
		/*console.log(row);
		console.log(data);
		console.log(dataIndex);
		console.log('--------------------');*/
		//字体居中
		$(row).addClass('text-c');
		//复选框
		$(row).find('td:eq(0)').html('<input type="checkbox" value="'+ data.Id +'" name="useralldel">');

		// //角色显示
		// if(data.role[0]){
		// 	$(row).find('td:eq(3)').html(data.role[0].display_name);
		// 	// console.log(data.role[0])	
		// }
		if(data.Status == '1'){
			//状态 启用
			$(row).find('td:eq(5)').addClass('td-status').html('<span class="label label-success radius">已启用</span>');
			// 操作
			$(row).find('td:eq(6)').addClass('td-manage').html('<a style="text-decoration:none" onClick="info_stop(this,' + data.Id +')" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a><a title="编辑" href="javascript:;" onclick="info_edit(\'编辑\',\'/admin/user/edit?id=' + data.Id + '\',\'1\',\'\',\'510\')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>  <a title="删除" href="javascript:;" onclick="info_del(this,' + data.Id + ')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>');

		}else{
			//状态 禁用
			$(row).find('td:eq(5)').addClass('td-status').html('<span class="label radius">已停用</span>');
			//操作
			$(row).find('td:eq(6)').addClass('td-manage').html('<a style="text-decoration:none" onClick="info_start(this,' + data.Id +')" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe615;</i></a><a title="编辑" href="javascript:;" onclick="info_edit(\'编辑\',\'/admin/user/edit?id=' + data.Id + '\',\'1\',\'\',\'510\')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除" href="javascript:;" onclick="info_del(this,' + data.Id + ')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a> ');
		}
	}
});

/*
	参数解释：
	title	标题
	url		请求的url
	id		需要操作的数据id
	w		弹出层宽度（缺省调默认值）
	h		弹出层高度（缺省调默认值）
*/

/*管理员-增加*/
function info_add(title,url,w,h){
	layer_show(title,url,w,h);
}

/*管理员-编辑*/
function info_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*管理员-编辑密码*/
function info_editpass(title,url,id,w,h){
	layer_show(title,url,w,h);
}

/*管理员-启用*/
function info_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		//此处请求后台程序，下方是成功后的前台处理……
		$.ajax({
			type: 'POST',
			url: '/api/user/editstatus',
			dataType: 'json',
			data:"id="+id+"&status=1",
			success: function(data){
				if(data.type=='success'){
					$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
					$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
					$(obj).remove();
					layer.msg('已启用!', {icon: 6,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
		
	});
}

/*管理员-停用*/
function info_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		//此处请求后台程序，下方是成功后的前台处理……
		$.ajax({
			type: 'POST',
			url: '/api/user/editstatus',
			dataType: 'json',
			data:"id="+id+"&status=0",
			success: function(data){
				if(data.type=='success'){
					$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
					$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
					$(obj).remove();
					layer.msg('已停用!',{icon: 5,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
		
	});
}

/*管理员-删除*/
function info_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: '/api/user/del',
			dataType: 'json',
			data:"id="+id,
			success: function(data){
				if(data.type=='success'){
					$(obj).parents("tr").remove();
					layer.msg('已删除!',{icon:1,time:1000},function(){
						// console.log(table);
						table.api().ajax.reload()
					});
				}else{
					layer.msg(data.content,{icon:0,time:1000},function(){
						// console.log(table);
						table.api().ajax.reload()
					});
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}

/*管理员-批量删除*/
function info_datadel(title,url){

	//取得选中删除的用户
	var delid = $("input[name='useralldel']");
	var ids = Array();
	$.each(delid,function(i,n){
		if($(n).is(':checked')){
			var id = $(n).val();
			ids.push(id)
		}
	})
	ids = ids.join(",");
	$.ajax({
		type: 'POST',
		url: '/api/user/delall',
		dataType: 'json',
		data:"id="+ids,
		success: function(data){
			if(data.type=='success'){
				layer.msg(data.content,{icon:1,time:1000},function(){
					//刷新datatable数据
					table.api().ajax.reload()
				});
			}
		},
		error:function(data) {
			console.log(data.msg);
		},
	});

}


/*管理员-搜索*/
$("button[name='sosuo']").click(function(){

//取得搜索的用户名
var username = $("input[name='sosuouser']").val();

//调用datatable插件进行搜索功能ajax更新
table.api().ajax.url('/api/user/list?username=' + username).load();

})

</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>